const LazyLoad = {
    //安装的插件使用方法可以直接应用
    install(Vue) {
        // 定义默认的路径信息
        let defaultSrc = "/logo.png";

        //定义全局自定义指令
        Vue.directive("lazy", {
            //生命周期的钩子函数
            bind(el, binding) {
                // console.log(binding.value);
                LazyLoad.init(el, binding.value, defaultSrc);
            },
            inserted(el) {
                LazyLoad.listenerScroll(el);
            }
        })
    },

    //初始化的每张图片默认的操作
    init(el, val, def) {
        // console.log(el,val);
        //设置默认地址和data-src的地址信息
        el.setAttribute("data-src", val);
        el.setAttribute("src", def);
    },

    //监听滚动事件
    listenerScroll(el) {
        LazyLoad.loadImg(el);

        //监听滚动操作
        window.addEventListener("scroll", () => LazyLoad.loadImg(el));
    },

    //判断加载图片的地址信息
    loadImg(el) {
        //获取html的地址信息
        let html = document.documentElement || document.body;

        // console.log(el.getBoundingClientRect())
        let { top, bottom } = el.getBoundingClientRect();

        // 第一种判断方式判断图片是否进入可视化区域
        // if(el.offsetTop <= html.clientHeight + html.scrollTop){
        //     setTimeout(()=>{
        //         el.src = el.getAttribute("data-src");
        //     },500);

        // }

        if (top>= 0 && top<=html.clientHeight) {
            setTimeout(() => {
                el.src = el.getAttribute("data-src");
            }, 500);
        }

        console.log(top, bottom, el.id);
    }
}

export default LazyLoad;